<template>
  <div>
    <div v-show="!isShowSubDetail">
      <jxf-titletip :title="title" @refreshPage="refreshFuc"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="searchInfo" ref="searchInfo">
          <el-form-item label="账号:" prop="telphone">
            <el-input v-model="searchInfo.telphone" @keyup.enter.native="enterNextInput('contact')" ref="input-telphone"></el-input>
          </el-form-item>
          <el-form-item label="联系方式:" prop="contact">
            <el-input v-model="searchInfo.contact" @keyup.enter.native="onSearch" ref="input-contact"></el-input>
          </el-form-item>
          <el-form-item label="账号状态:" prop="status">
            <el-select v-model="searchInfo.status" clearable placeholder="全部">
              <el-option label="启动" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="权限:" prop="perCodes">
            <el-select v-model="searchInfo.perCodes" clearable placeholder="全部">
              <el-option label="采购" value="MERCHANT_ORDER"></el-option>
              <el-option label="财务" value="MERCHANT_FINANCE"></el-option>
              <el-option label="收货" value="MERCHANT_GOODS"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
        </div>
        <jxf-table class="" :table="dataTable">
          <template slot="status" slot-scope="sub">
            <div>{{sub.row.status === 0 ? "禁用" : "启用"}}</div>
          </template>
          <template slot="createTime" slot-scope="sub">
            <div>{{FormatDate.timeFormat(sub.row.createTime)}}</div>
          </template>
          <template slot="operation" slot-scope="sub">
            <el-button type="text" @click="watchDetail(sub.row)">查看</el-button>
            <el-button type="text" @click="ableSubAccount(sub.row)" v-if="sub.row.status === 0" class="c-red">启用</el-button>
            <el-button type="text" @click="disableSubAccount(sub.row)" v-else class="c-red">禁用</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
    <DisSubBuyer :isShowDetail.sync="isShowDisSubDetail" :dataInfo="dataSubInfo" @fresh="fresh"></DisSubBuyer>
    <SubBuyer :isShowDetail.sync="isShowAbleSubDetail" :dataInfo="dataAbleSubInfo" @fresh="fresh"></SubBuyer>
    <SubDetail v-if="isShowSubDetail" :dataInfo="tableSubDetailInfo" @goBack="goSubBack"></SubDetail>
  </div>
</template>

<script>
  import DisSubBuyer from './DisSubBuyer'
  import SubBuyer from './SubBuyer'
  import SubDetail from './SubDetail'
  import FormatDate from '@/assets/js/formatDate'

    export default {
        name: "BuyerSubAccount",
        components: { DisSubBuyer, SubBuyer, SubDetail },
        props: {

        },
        data() {
          return {
            title: "采购商子账户",
            subAccountInfo: {

            },
            searchInfo: {
              telphone: "",
              contact: "",
              status: "",
              perCodes: ""
            },
            FormatDate: FormatDate,
            dataSubInfo: {
            },
            dataAbleSubInfo: {
            },
            tableSubDetailInfo: {},
            isShowSubDetail: false,
            isShowDisSubDetail: false,
            isShowAbleSubDetail: false,
            dataTable: {
              border:true,
              loading:false,
              hasSelect:false,
              hasOperation:false,
              tr: [
                {
                  id: '1',
                  label: '员工编号',
                  fixed: "left",
                  width: '120',
                  prop: 'id'
                },
                {
                  id: '2',
                  label: '员工账号',
                  prop: 'telphone'
                },
                {
                  id: '3',
                  label: '员工姓名',
                  prop: 'userName'
                },
                {
                  id: '4',
                  label: '联系电话',
                  prop: 'contact'
                },
                {
                  id: '5',
                  label: '拥有权限',
                  prop: 'cname'
                },
                {
                  id: '6',
                  label: '负责门店',
                  prop: 'remarks'
                },
                {
                  id: '7',
                  label: '创建时间',
                  show: 'template',
                  prop: 'createTime'
                },
                {
                  id: '8',
                  label: '账号状态',
                  show: 'template',
                  prop: 'status'
                },
                {
                  id: '9',
                  label: '操作',
                  show: 'template',
                  fixed: "right",
                  minWidth:"200",
                  prop: 'operation'
                }
              ],
              operation: [],
              data: this.$route.params.dataList ? this.$route.params.dataList : []
            },
            pageTotal:this.$route.params.total,
            pageSize:10,
            currentPage:1
          }
        },
        methods: {
          refreshFuc() {
            this.resetForm('searchInfo')
            this.onSearch()
          },
          onSearch() {
            this.currentPage = 1;
            this.getData()
          },
          fresh() {
            this.getData()
          },
          enterNextInput(inputName) {
            this.$refs["input-" + inputName].focus();
          },
          getData() {
            this.dataTable.loading = true;
            let data = {
              ...this.searchInfo,
              userId: this.$route.params.id,
              pageNum: this.currentPage,
              pageSize: this.pageSize
            }
            ajax.post(apis.user.getMercgantStarffList, data).then(res => {
              if(res.code === "10000000") {
                this.dataTable.data = res.data.dataList;
                this.pageTotal = res.data.total;
              } else {
                this.$message.error(res.message)
              }
              this.dataTable.loading = false
            })
          },
          resetForm(formName) {
            this.$refs[formName].resetFields()
          },
          ableSubAccount(obj) {
            this.dataAbleSubInfo = obj
            this.isShowAbleSubDetail = true;
          },
          disableSubAccount(obj) {
            console.log("触发")
            this.dataSubInfo = obj
            console.log(this.dataSubInfo)
            this.isShowDisSubDetail = true;
          },
          // 查看详情
          watchDetail(obj) {
            console.log(obj);
            this.tableSubDetailInfo = {
                detailInfo: [
                  {
                    label: "员工账号",
                    value: obj.telphone
                  }, {
                    label: "采购权限",
                    value: obj.perCode && obj.perCode.indexOf('MERCHANT_ORDER') >= 0 ? "1" : "0",
                    type: 'purchasingAuthority'
                  }, {
                    label: "登陆密码",
                    value: "******",
                    type: 'password'
                  }, {
                    label: "财务权限",
                    value: obj.perCode && obj.perCode.indexOf('MERCHANT_FINANCE') >= 0 ? "1" : "0",
                    type: 'financialAuthority'
                  }, {
                    label: "员工姓名",
                    value: "18794941209"
                  }, {
                    label: "收货员",
                    value: obj.perCode && obj.perCode.indexOf('MERCHANT_GOODS') >= 0 ? "1" : "0",
                    type: 'receipt'
                  }, {
                    label: "负责门店",
                    value: obj.remarks
                  }, {
                    label: "",
                    value: ""
                  }
                ]
            };
            this.isShowSubDetail = true;
          },
          // f返回子账户列表页面
          goSubBack() {
            console.log("触发");
            this.isShowSubDetail = false;
          },
          // 切换页面
          currentPageChange(pageNo) {
            this.currentPage = pageNo;
            this.getData()
          },
          // 切换页面条数
          pageSizeChange(pageNo) {
            this.pageSize = pageNo
            this.getData()
          },
        }
    }
</script>

<style lang="scss" scoped>

</style>
